<template>
  <div class="departments-container">
    <!-- app-container提供了内边距 -->
    <div class="app-container">
      <el-card v-loading="loading">
        <!-- 一行  24分 -->
        <!-- root 表示是上面的结构, 不要编辑/删除 -->
        <TreeTools
          :node-data="company"
          root
          @openDialog="openDialogFn"
        />

        <!--
          树形结构
          data 树形数据
          props  设置树形结构读取数据的字段名
          default-expand-all  默认展开所有子节点
        -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 默认插槽 作用域插槽 -->
          <!--
            el-tree组件内部封装:
            <slot name="default" :data="xxx" :node="xxxx" index="xxx"></slot>
            { data: ..., node: xxx, index: xxxx }

            <template #default="{data}">
           -->

          <!-- obj.data => el-tree组件提供给你的!!! -->
          <!-- data 是组件内部提供的数据(作用域插槽) -->
          <template #default="{ data }">
            <TreeTools
              :node-data="data"
              @openDialog="openDialogFn"
              @del-dept="getDepartments"
              @openEditDialog="openEditDialogFn"
            />
          </template>
        </el-tree>

        <!-- <input type="checkbox" checked="" name="" id=""> -->
      </el-card>
    </div>

    <!-- 添加部门的对话框 -->

    <!--
      子传父: 1.this.$emit('xxx', value)  2. <child @xxx="xxxFn">  xxxFn() {}

      vue提供sync修饰符:
      1. 父组件传数据给子组件时, :xx.sync="xxx"    把数据的控制权交给了子组件
      2. 子组件 通过一定的语法 this.$emit('update:xxx', value) 可以去修改父组件传过来的数据

      结论: 子组件如果想要修改父组件传过来的数据, 直接通过sync语法(两小步),
        1.父组件传值 :xx.sync="xxx"
        2.子组件this.$emit('update:xxx', value)
     -->
    <AddDept
      ref="addDept"
      :dept-list="deptList"
      :node-data="nodeData"
      :is-show.sync="isShow"
      @add-dept="getDepartments"
    />
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
import { reqGetDepartments } from '@/api/departments'
import { transList2TreeData } from '@/utils'
import hello from '@/mixins/hello'

export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  mixins: [hello],
  data() {
    return {
      // label 文字描述  children 子节点 []
      departs: [],
      deptList: [], // 列表数据
      defaultProps: {
        label: 'name'
        // children: 'children'
      },
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      isShow: false,
      nodeData: {}, // 为了以后新增部门 确定, 新增给谁做子部门
      loading: false
    }
  },
  created() {
    // console.log('大家好, 我是一个新组件')
    this.getDepartments()
  },
  methods: {
    // 一旦调用这个函数, 自动发请求 获取最新的部门列表  渲染页面
    async getDepartments() {
      this.loading = true

      // 希望两秒以后发请求 获取结果
      // 等一个异步操作结束以后, 再做某件事 1.回调  2.封装promise (then/ await)
      // await new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     resolve()
      //   }, 2000)
      // })

      // 2秒以后执行下面的操作

      const { data } = await reqGetDepartments()
      console.log(data.depts, 9797)
      // 保留一份原始的列表数据, 方便查找
      this.deptList = data.depts
      this.company.name = data.companyName
      // 以下这行代码 为了去做 总公司下添加子部门时 重复性校验
      this.company.id = ''
      // 先找一级部门  pid = ''
      // console.log(transList2TreeData(data.depts, ''), 99999)
      this.departs = transList2TreeData(data.depts, '')

      this.loading = false
    },
    // closeDialogFn(flag) {
    //   this.isShow = flag
    // },
    openDialogFn(nodeData) {
      // 添加
      // 让弹窗显示
      this.isShow = true
      this.nodeData = nodeData

      // 发请求
      // getSimpleUserList 是子组件的方法
      // 父组件调用子组件的方法!!!  => 获取子组件实例 调用子组件的方法/修改子组件的数据
      // this.$refs.form.validate
      this.$nextTick(() => {
        // this.$refs.addDept.getSimpleUserList()
        // this.$refs.addDept.dialogTitle = '添加子部门'
      })
    },
    openEditDialogFn(nodeData) {
      // 编辑
      this.nodeData = nodeData
      this.isShow = true
      // vue是异步更新dom,
      // 结论就是: 修改数据之后, 想要新的子组件  this.$nextTick
      this.$nextTick(() => {
        // 页面更新之后, 获取子组件, 调用方法
        // this.$refs.addDept.getSimpleUserList()
        // this.$refs.addDept.dialogTitle = '编辑部门'
        this.$refs.addDept.getDepartDetail()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  // 深度作用选择器 less /deep/ ;  scss  ::v-deep ;   css: >>>
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
